<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>订单列表</title>
		<script type="text/javascript" src="/js/jquery-1.11.1.js"></script>
    	<script type="text/javascript" src="/js/bootstrap.js" ></script>
    	<link  rel="stylesheet" type="text/css" href="/css/bootstrap.css"/>
		<link rel="stylesheet" type="text/css" href="/css/style.css"/>
		<style>
			span{
				color: #1EABFF;
				padding: 0 5px;
			}
		</style>
	</head>
	<body>
		<form id="myForm" class="form-horizontal">
			<h2>订单列表</h2>
			<div class="searchDiv">
				订单编号:<input name="o_id" placeholder="订单编号"/>
				客户名称:<input name="c_name" placeholder="客户名称"/>
				<button type="button" onclick="loadData()" class="btn btn-info">查询</button>
				<button type="reset" class="btn btn-warning">重置</button>
			</div>
			<table class="table table-bordered table-striped">
				<thead>
					<tr>
						<th>订单编号</th>
						<th>商品编号</th>
						<th>商品名称</th>
						<th>客户名称</th>
						<th>应收额数</th>
						<th>备注</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody id="tboby">
				</tbody>
			</table>
			<!--分页部分-->
			<div class="form-group">
				<div class="col-sm-3" style="text-align: right">
					<ul class="pagination" style="margin: 0;">
						<li name="pageLi" id="firstPage"><a href="javascript:void(0)">首页</a></li>
						<li name="pageLi" id="prePage"><a href="javascript:void(0)">上一页</a></li>
						<li name="pageLi" id="nextPage"><a href="javascript:void(0)">下一页</a></li>
						<li name="pageLi" id="lastPage"><a href="javascript:void(0)">末页</a></li>
					</ul>
				</div>
				<label class="control-label col-sm-3" style="text-align: right" >
					共<span id="total"></span>条数据，共<span id="pages"></span>页
				</label>
				<label class="control-label col-sm-1" style="text-align: right" >
					每页显示
				</label>
				<div   class="col-sm-1" style="text-align: right; padding:0;margin: 0" >
					<select class="form-control" name="pageSize">
						<option value="5">5</option>
						<option value="10">10</option>
						<option value="15">15</option>
					</select>
				</div>
				<label class="control-label col-sm-1" style="text-align: left;width: 87px;padding: 8px 5px;" >
					条数据
				</label>
				<label class="control-label col-sm-1" style="text-align: right" >
					跳转到第
				</label>
				<div   class="col-sm-1" style="text-align: right; padding:0;margin: 0" ><input class="form-control" name="pageNum" value="1" /></div>
				<label class="control-label col-sm-1" style="text-align: left">页</label>
			</div>
		</form>
	</body>

</html>
<script>
	//页面加载完毕之后发送异步请求
	$(function(){
		loadData();
		$("ul[class='pagination']>li").click(function(){
			if(($(this).attr("class"))=='disabled')
				return;
			let num=$(this).attr("name");
			$("input[name='pageNum']").val(num);
			loadData();
		});
	});
	//填充分页信息
	function fillPageData(pageInfo) {
		//填充信息
		$("#total").html(pageInfo.total);
		$("#pages").html(pageInfo.pages);
		$("input[name='pageNum']").val(pageInfo.pageNum);
		$("select[name='pageSize']").val(pageInfo.pageSize);
		//设置按钮的属性值和样式
		$("#firstPage").attr("name",1);
		$("#prePage").attr("name",pageInfo.prePage);
		$("#nextPage").attr("name",pageInfo.nextPage);
		$("#lastPage").attr("name",pageInfo.pages);
		$("#firstPage").removeClass("disabled");
		$("#prePage").removeClass("disabled");
		$("#nextPage").removeClass("disabled");
		$("#lastPage").removeClass("disabled");
		if(pageInfo.isFirstPage){//如果是第一页：上一页和首页禁用
			$("#firstPage").addClass("disabled");
			$("#prePage").addClass("disabled");
		}
		if(pageInfo.isLastPage){//如果已经是最后一页：下一页和末页禁用
			$("#nextPage").addClass("disabled");
			$("#lastPage").addClass("disabled");
		}
	}

	//更新按钮
	function updateOrder(o_num) {
		window.location.href="/pages/order/update.html?o_num="+o_num;
	}

	//删除按钮
	function deleteOrder(d_num) {
		if(confirm("确定要删除吗?")) {
			//发起异步请求
			$.ajax({
				type: "POST",
				// RESTful风格的API定义
				url: "/order/" + d_num,
				data: "_method=DELETE",
				success: function (vo) {
					if(vo.code==200){
						loadData();
					}else{
						alert("删除失败！"+vo.msg);
					}
				}
			});
		}
	}

	String.prototype.GetValue= function(para) {
		let reg = new RegExp("(^|&)"+ para +"=([^&]*)(&|$)");
		let r = this.substr(this.indexOf("\?")+1).match(reg);
		if (r!=null) return unescape(r[2]); return null;
	}
	//加载数据
	function loadData(){
		//alert($("#myForm").serialize())
		$.ajax({
			type: "GET",
			url: "/order/list",
			data: $("#myForm").serialize(),//主要是分页和多条件参数数据
			dataType:"json",
			success: function(vo){
				let list=vo.pageInfo.list;
				let str="";
				for(let i=0;i<list.length;i++){
					let obj=list[i];
					let o_num=obj.o_num;
					let o_id=obj.o_id;
					let p_name=obj.p_name;
					let p_id=obj.p_id;
					let c_name=obj.c_name;
					let o_money=obj.o_money;
					let o_remarks=obj.o_remarks;
					// '<button type="button" name="deleteBtn" class="btn btn-sm btn-danger" onclick="deleteOrder('+o_num+')">删除</button>&nbsp;'
					let btnStr= '<button type="button" name="updateBtn" class="btn btn-sm btn-info" onclick="updateOrder('+o_num+')">更新</button>&nbsp;';
					str+='<tr>' +
							'            <td>'+o_id+'</td>' +
							'            <td>'+p_id+'</td>' +
							'            <td>'+p_name+'</td>' +
							'            <td>'+c_name+'</td>' +
							'            <td>'+o_money+'</td>' +
							'            <td>'+o_remarks+'</td>' +
							'            <td>'+btnStr+'</td>' +
							'</tr>';
				}
				$("#tboby").html(str);
				//填充分页数据
				fillPageData(vo.pageInfo);
			}
		});
	}
</script>
